<template>
  <div class="cart">

    <!-- 顶部 -->
    <header class="category-header wrap">
      <i class="iconfont iconfont-xiangzuo" @click="$router.go(-1)"></i>
      购物车
      <i class="iconfont iconfont-gengduo-hengxiang"></i>
    </header>

    <!-- 购物列表 -->
    <section class="shopcart-page">
      <div class="shopcart-list">
        <shopcart-box ref="product"></shopcart-box>
      </div>
    </section>

    <div class="recommendTip">
      <van-divider>可能你还想要</van-divider>
    </div>

    <!-- 推荐 -->
    <recommend-box />

    <!-- 提交订单 -->
    <van-submit-bar class="submitBar" :price="total" button-text="提交订单" @submit="onSubmit">
      <van-checkbox v-model="allChecked" @change="handAllCheck">全选</van-checkbox>
    </van-submit-bar>

    <!-- 底部导航栏 -->
    <tabbar :active="2" />
  </div>

</template>

<script>
import shopcartBox from "../../components/shopcart-box.vue";
import tabbar from "../../components/tabbar.vue";
import { getCarList, submitToCar, delCar } from "../../api/index";
import { Dialog } from 'vant';
import recommendBox from "../../components/recommendBox.vue";
import {mapState} from 'vuex';

export default {
  components: {
    shopcartBox,
    tabbar,
    recommendBox
  },
  data() {
    return {
      allChecked: false,
      value: 1,

      count: 1, //商品数量
      carList: [], // 存储购物车数据
    }
  },
  created() {
    this.fetchCarList()
  },
  methods: {
    // 获取购物车数据
    fetchCarList() {
      getCarList().then(res => {
        this.carList = res;
        if (this.carList) {
          this.carList.forEach(v => {
            const goods = {
              id: v.productId,
              count: v.count,
              price: v.price,
              ischecked: false
            }
            // 数据请求成功后 将其添加到store中
            this.$store.commit('addGoods', goods)
          })
        }
      })
    },
    // 保存商品数量
    onStepperChange(value) {
      this.count = value
    },
    onAddCartClicked() {
      const params = {
        productId: this.id,
        count: this.count
      }
      submitToCar(params).then(res => {
        if (res.status == 0) {
          this.$router.push('/shopcart')
        } else {
          this.$toast(res.msg)
        }
      })
    },
    // 监听左滑删除商品
    onClose(clickPosition, instance) {
      switch (clickPosition) {
        case 'outside':
          instance.close();
          break;
        case 'right':
          Dialog.confirm({
            message: '确定删除吗？'
          }).then(() => {
            const params = {
              id: this.car.id
            }
            // 发送删除数据请求
            delCar(params).then(res => {
              if (res.status == 0) {
                // 删除成功 刷新数据
                this.$emit('refresh', this.car.id)
                instance.close();
              } else {
                this.$toast(res.msg)
              }
            })
          });
          break;
      }
    },
    // 删除商品后 刷新数据 并从store中移除该商品
    refreshCar(id) {
      const index = this.carList.findIndex(v => v.id == id)
      this.carList.splice(index, 1)
      this.$store.commit('removeGoods', id)
    },
    // 提交订单
    onSubmit() {
      // 到支付环节

    },
    // 触发子组件的全选方法
    handAllCheck(){
      this.$refs.product.allCheck(this.allChecked)
    },
  },
  computed:{
    ...mapState(['total']),
  }
}
</script>

<style lang="scss" scoped>
@import "../../common/style/mixin.scss";

.cart {
  background-color: #f7f7f7;
}

// 顶部
.category-header {
  @include fj;
  width: 100%;
  height: 100px;
  line-height: 100px;
  padding: 0 30px;
  @include boxSizing;
  font-size: 30px;
  color: #656771;
  z-index: 10000;

  &.active {
    background: $red;
  }

  .iconfont-xiangzuo {
    font-size: 40px;
    font-weight: bold;
  }

  .header-search {
    display: flex;
    width: 76%;
    height: 40px;
    line-height: 40px;
    margin: 20px 0;
    padding: 10px 0;
    color: #232326;
    background: #f7f7f7;
    @include borderRadius(40px);

    .iconfont {
      padding: 0 10px 0 40px;
      font-size: 34px;
    }

    .search-title {
      font-size: 24px;
      color: #666;
      background: #f7f7f7;
    }
  }

  .iconfont-gengduo-hengxiang {
    font-size: 45px;
  }

  .search-btn {
    height: 70px;
    margin: 15px 0;
    line-height: 70px;
    padding: 0 10px;
    color: #fff;
    background: $red;
    @include borderRadius(10px);
  }
}

// 商品列表
.shopcar-container {
  .shopcart-box {
    display: flex;
    justify-content: space-around;
    background: #fff;
    padding: 10px;
    margin: 10px 0;
    height: 200px;

    img {
      width: 180px;
      height: 180px;
      margin: 0 10px;
    }

    .shopcart-item-info {
      display: flex;
      flex: 70%;
      flex-direction: column;
      justify-content: space-between;

      .shopcart-name {
        height: 70px;
        font-size: 26px;
        overflow: hidden;
      }

      .shopcart-subtitle {
        font-size: 24px;
        color: #999;
      }

      .shopcart-stepper {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .shopcart-price {
          font-size: 30px;
          color: $red;
        }
      }
    }
  }
  .van-button {
    height: 200px;
  }
}

.recommendTip {
  height: 80px;
  padding-top: 30px;
  margin-top: 20px;
  background-color: #fff;
}

// 推荐商品
.recommend {
  margin-bottom: 100px;
  .recommend-list {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;

    .recommend-item {
      display: flex;
      flex-direction: column;
      width: 50%;
      padding: 20px;
      @include boxSizing;
      border-bottom: 1px solid #dcdcdc;

      &:nth-child(2n-1) {
        border-right: 1px solid #dcdcdc;
      }

      img {
        width: 100%;
        height: 290px;
        margin: 0 auto;
      }

      p {
        height: 60px;
        padding: 20px 0;
        font-size: 26px;
        line-height: 40px;
        color: #333;
        overflow: hidden;
      }

      i {
        font-style: normal;
        font-size: 32px;
        color: $red;
      }
    }
  }
}

// 提交订单
.submitBar {
  margin-bottom: 90px;
}
</style>